<template>
    <div class="detailmain">
        <list-top></list-top>
        <div class="mall-position">
            主页 > 药品分类 > 感康感冒药
        </div>
        <div class="top-detail clear">
            <div class="gallery">
                <div class="bigImg">
                    <img-zoom :src="smsrc" width="450" height="250" :bigsrc="bigsrc" :configs="configs"></img-zoom>
                </div>
                <div class="m-swiper-box">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <!-- slides -->
                        <swiper-slide v-for="(oimg,index) in slidesList" :key="index">
                            <img :src="oimg.smimg" alt="" @click="showMyImg(oimg.bigimg)">
                        </swiper-slide>
                    </swiper>
                    <!-- Optional controls,,,,, -->
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </div>
            </div>
            <div class="property">
                <h1 class="t-title">九芝堂 六味地黄丸（浓缩丸）360丸 滋阴补肾虚耳鸣盗汗遗精六位药品</h1>
                <div class="t-price">
                    <table>
                        <tbody>
                            <tr>
                                <td>价格</td>
                                <td class="red-num"><span>￥</span><span>300.00</span></td>
                                <td class="red-num"><span>￥</span><span>200.00</span></td>
                                <td class="red-num"><span>￥</span><span>200.00</span></td>
                            </tr>
                            <tr>
                                <td>起批量</td>
                                <td>1-99件</td>
                                <td>100-199件</td>
                                <td>>=299件</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="t-line-item">
                    <span class="t-line-title">药品分类</span>
                    <div class="t-line-content">
                        <div class="one-line">药品 > 中成药 > 感冒类药物</div>
                    </div>
                </div>
                <div class="t-line-item">
                    <span class="t-line-title">包装规格</span>
                    <div class="t-line-content">
                        <div class="one-line"><strong>500mg*100粒*96瓶/箱</strong>&nbsp;&nbsp;300.00元</div>
                    </div>
                </div>
                <div class="t-line-item">
                    <span class="t-line-title">购买数量</span>
                    <div class="t-line-content">
                        <el-input-number size="mini" v-model="num1" @change="handleChange()" :min="1" :max="200" label="描述文字"></el-input-number>
                    </div>
                </div>
                <div class="luckyOperation clear">
                    <button class="buyNow">立即购买</button>
                    <button class="addToCart"><i class="iconfont icon-cart"></i>加入进货单</button>
                    <button class="collection"><i class="iconfont icon-shoucang"></i>加入收藏</button>
                </div>
                <div class="securityList">
                    <span class="title">实力保障</span>
                    <div class="item">
                        <span><i class="iconfont icon-oksignlarge"></i>100%正品</span>
                        <span><i class="iconfont icon-oksignlarge"></i>药监认证</span>
                        <span><i class="iconfont icon-oksignlarge"></i>买家保障</span>
                    </div>
                </div>
            </div>
            <div class="supplierInfo">
                <div class="supplierhead">认证商家</div>
                <router-link to="/" class="supplierImg">
                    <img src="../images/bak05.jpg" alt="">
                </router-link>
                <div class="supplierName">
                    <router-link to="/">优源医疗器械专营店</router-link>
                </div>
                <el-rate v-model="value5" disabled>
                </el-rate>
                <div class="supplierPlace">地点：桂林</div>
                <div class="supplierLink">
                    <router-link to="/"><i class="iconfont icon-fangzi"></i>进店逛逛</router-link>
                    <router-link to="/"><i class="iconfont icon-shoucang"></i>收藏店铺</router-link>
                    <router-link to="/"><i class="iconfont icon-duanxin"></i>联系客服</router-link>
                </div>
            </div>
        </div>
        <!--  /.top-detail -->
        <div class="rcdGoods detail-rcdGoods">
            <div class="rcdTopBar">
                <div class="headTitle fl"><span class="active">店铺推荐</span></div>
                <span class="change" @click="replace"><i class="iconfont icon-huanyihuan"></i>换一换</span>
            </div>
            <div class="w-line">
                <div class="floater"></div>
            </div>
            <div class="rcdGoodsList">
                <div class="rcdItem" v-for="index in arr" :key="index">
                    <img :src="rcdGoodsList[index].img" alt="" class="goodsImg">
                    <a href="#" :title="rcdGoodsList[index].name" class="goodsName">{{rcdGoodsList[index].name}}</a>
                    <div class="price"><em>￥</em>{{rcdGoodsList[index].price}}</div>
                </div>
            </div>
        </div>
        <!--  /.rcdGoods -->
        <div class="offerDetailContext">
            <div class="head-tab">
                <div class="headTabBox" ref="headTabBox" :class="{fixed:fixedHeadTab}">
                    <div class="rcdTopBar" >
                        <div class="headTitle fl">
                            <span :class="{active: headTabArr.showDrugDetail == true}" @click="showTabContent('1')">药品详情</span>
                            <span :class="{active: headTabArr.showInstructios == true}" @click="showTabContent('2')">说明书</span>
                            <span :class="{active: headTabArr.showPacking == true}" @click="showTabContent('3')">包装与规格</span>
                        </div>
                    </div>
                    <div class="w-line">
                        <div class="floater" :class="'floaterLeft'+floaterLeftnum"></div>
                    </div>
                </div>
                <div class="content-tab">
                    <div class="drugDetail" v-if="headTabArr.showDrugDetail">
                        <ul class="clear">
                            <li>品牌： 999</li>
                            <li>商品名称：999强力枇杷露 225ml</li>
                            <li>商品编号：3545850</li>
                            <li>商品毛重：334.00g</li>
                            <li>商品产地：南昌</li>
                            <li>货号：EZM027133G</li>
                            <li>药品类别：中药</li>
                            <li>药品剂型：其他症状</li>
                            <li>使用方法：口服</li>
                            <li>适用人群：成人</li>
                            <li>适用类型：有痰咳嗽</li>
                        </ul>
                        <router-link to="/" class="moreDrugDetail">更多参数></router-link>
                    </div>
                    <div class="instructios" v-if="headTabArr.showInstructios">
                        <p>
                            【药品名称】 枯草杆菌二联活菌颗粒<br/> 【主要成分】 本品为复方制剂，每袋（1克）含活菌冻干粉37.5毫克、维生素C 10毫克、维生素B1 0.5毫克、维生素B2 0.5毫克、维生素B6 0.5毫克、维生素B12 1.0微克、烟酰胺2.0毫克、 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乳酸钙20毫克、氧化锌1.25毫克、辅料为：乳糖、d-甘露醇、聚维酮K30、情致无水硅酸、舔菊素。
                            【作用类别】 本品为消化类非处方药药品。<br/> 【适 应 症】 枯适用于因肠道群失调引起的腹泻、便秘、胀气、消化不良等。<br/> 【用法用量】 本品为儿童专用药品，2岁以下儿童，一次1袋。1日1-2次；2岁以上儿童一次1-2袋，一日1-2次，用40°以下温开水或牛奶冲服，也可直接服用。<br/> 【注意事项】 1.直接服用时应注意避免呛咳，不满3岁的婴幼儿不宜直接服用。<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.本品为活菌制剂，切勿将本品至于高温处，溶解时水温不宜超过40。
                            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.对本品过敏者禁用，过敏体质者慎用。
                            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.本品性状发生改变时禁止使用。
                            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.请将本品放在儿童不能接触的地方。
                            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6.儿童必须在承认监护下使用。
                            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7.如正在使用其他药品，使用本品前请咨询医师或药师。
                            <br/> 【不良反应】 推荐剂量未见明显不良反应，罕见腹泻次数增加，停药后可恢复。<br/> 【规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格】 每袋一克 <br/> 【贮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;藏】 密闭。25℃以下避光干燥处保存。<br/> 【批准文号】 国药准字S20020037 <br/> 【生产厂家】 北京韩美药品有限公司
                        </p>
                    </div>
                    <div class="packing" v-if="headTabArr.showPacking">
                        <ul class="clear">
                            <li v-for="(ospecifications,index) in specificationsList" :key="index"><span>{{ospecifications.title}}</span>{{ospecifications.value}}</li>
                        </ul>
                        <div class="packingList">
                            <span>包装清单</span>汇仁 肾宝片 0.7g*126片*1     说明书*1    盒子*1    药品*1    
                        </div>
                    </div>
                    <div class="imgItem">
                        <img src="../images/bak08.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- /.offerDetailContext -->
    </div>
</template>

<script>
    import imgZoom from './imgZoom.vue';
    import listTop from "./public/listTop";
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    export default {
        components: {
            imgZoom,
            swiper,
            swiperSlide,
            listTop
        },
        data() {
            return {
                num1: 1,
                value5: 5,
                rcdGoodsList: [{
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "1汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "2汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "3哈哈大会片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "4第三个十多个收到公司打工",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "5汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "6汇仁 肾宝片 126片 男女肾虚亏阴阳虚 温阳补肾药品男女肾虚亏阴阳虚 温阳补肾药品",
                        price: "32.5"
                    },
                    {
                        img: "http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        name: "7汇仁 肾宝片 126片 男女肾虚亏阴阳虚",
                        price: "32.5"
                    }
                ],
                arr: [0, 1, 2, 3, 4],
                headTabArr: {
                    showDrugDetail: true,
                    showInstructios: false,
                    showPacking: false,
                },
                floaterLeftnum: 1,
                fixedHeadTab: false,
                headTabOffsetTop: "",
                configs: {
                    width: 650,
                    height: 350,
                    maskWidth: 100,
                    maskHeight: 100,
                    maskColor: 'red',
                    maskOpacity: 0.2
                },
                swiperOption: {
                    slidesPerView: 5,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },
                smsrc:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",  //放大镜未放大的图片
                bigsrc:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",  //放大镜放大的图片
                slidesList:[  //小图片集合
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    },
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    },
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    },
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    },
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    },
                    {
                        smimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                        bigimg:"http://p5vegqhl6.bkt.clouddn.com/2018_03_20_17_41_57_zcXeJsvbTgYU27McyM4A1aQ78TeMn9f2.jpg",
                    }
                ],
                specificationsList:[  //包装与规格
                    {
                        title:"药品分类",
                        value:"药品>化学药品>感冒类药物",
                    },
                    {
                        title:"药品名称",
                        value:"复方感康药片",
                    },
                    {
                        title:"药品简介",
                        value:"产品简介好长的，不知道说什么，看不懂，随便写。",
                    },
                    {
                        title:"药品编号",
                        value:"A1234567890987654321",
                    },
                    {
                        title:"药品品牌",
                        value:"云南白药",
                    },
                    {
                        title:"药监类目",
                        value:"普通药物",
                    },
                    {
                        title:"卖点",
                        value:"补血滋阴，反正很有用，懒得打字",
                    },
                    {
                        title:"件装数量",
                        value:"每件中含有2包，每包中含有24盒",
                    },
                    {
                        title:"基药分类",
                        value:"基药类",
                    },
                    {
                        title:"医保目录",
                        value:"是",
                    },
                    {
                        title:"处方\非处方药",
                        value:"BX",
                    },
                    {
                        title:"经营范围",
                        value:"中成药",
                    },
                    {
                        title:"生产厂家",
                        value:"中国制药",
                    },
                    {
                        title:"特殊要求",
                        value:"中药保护、进口药品",
                    },
                    {
                        title:"剂型",
                        value:"片",
                    },

                    {
                        title:"批准文号",
                        value:"alghakghaghrlakhgja",
                    },
                    {
                        title:"产品单位",
                        value:"片",
                    },
                    {
                        title:"通用名",
                        value:"感冒药",
                    },
                    {
                        title:"产品规格",
                        value:"100*100*100",
                    },
                    {
                        title:"英文名称",
                        value:"shit",
                    },
                    {
                        title:"GMG认证情况",
                        value:"已认证",
                    },
                    {
                        title:"拼音首字母",
                        value:"PY",
                    },
                    {
                        title:"批准日期",
                        value:"1990/08/08",
                    },
                    {
                        title:"批次号",
                        value:"2018080888888a",
                    },
                    {
                        title:"药品本位码",
                        value:";lasdh;aiohgoar",
                    },
                    {
                        title:"产地",
                        value:"北京",
                    },
                    {
                        title:"生产批号",
                        value:"2018080888888",
                    },
                    
                ]
            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            // 换一换
            replace() {
                var a = [];
                var j = 0;
                while (j < 5) {
                    var b = Math.floor((Math.random() * this.rcdGoodsList.length));
                    if (a.indexOf(b) == -1) {
                        a.push(b);
                        j++;
                    }
                };
                this.arr = a;
            },
            showTabContent(logo) {
                var _this = this;
                for (var index in this.headTabArr) {
                    _this.headTabArr[index] = false;
                }
                if (logo == "1") {
                    this.headTabArr.showDrugDetail = true;
                    this.floaterLeftnum = 1;
                } else if (logo == "2") {
                    this.headTabArr.showInstructios = true;
                    this.floaterLeftnum = 2;
                } else if (logo == "3") {
                    this.headTabArr.showPacking = true;
                    this.floaterLeftnum = 3;
                }
            },
            //固定headTab导航
            headTabScroll() {
                let scrollTopValue = document.documentElement.scrollTop;
                if (scrollTopValue >= this.headTabOffsetTop) {
                    this.fixedHeadTab = true;
                } else {
                    this.fixedHeadTab = false;
                }
            },
            showMyImg(imgurl){
                this.smsrc = imgurl;
                this.bigsrc = imgurl;
            }
        },
        mounted() {
            this.headTabOffsetTop = this.$refs.headTabBox.offsetTop;
            window.addEventListener('scroll', this.headTabScroll, false);
        }
    }
</script>
<style lang="less">
    @import 'css/detail.less';
</style>

